<template>
  <div class="login-page">
    <div class="orange"></div>
    <div class="blue"></div>
    <div class="blue small"></div>
    <div class="login-box">
      <div class="logo-box">
        <div class="right">
          <div class="sys-name">杰OJ后台管理</div>
          <div class="sys-sub-name">好好学习天天向上</div>
        </div>
      </div>
      <div class="form-box">
        <div class="form-item">
          <img src="../assets/images/shouji.png">
          <el-input v-model="userAccount" placeholder="请输入账号"/>
          <!-- <el-input v-model="input" style="width: 240px" placeholder="Please input" /> -->
        </div>
        <div class="form-item">
          <img src="../assets/images/yanzhengma.png">
          <el-input v-model="password" type="password" show-password placeholder="请输入密码"/>
        </div>
        <div class="submit-box" @click="loginFun">
          登录
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import router from '@/router'
import {loginService} from "@/apis/suser.js";
import {ElMessage} from "element-plus";
import {setToken} from "@/utils/cookie.js";

const userAccount = ref('')
const password = ref('')

async function loginFun() {
  try {
    const loginResult = await loginService(userAccount.value, password.value)
    console.log("loginResult:", loginResult)
    setToken(loginResult.data.token)
    ElMessage.success('登录成功')
    router.push("/oj/layout")

  } catch (error) {
    console.log("error:", error)
  }
}

</script>

<style lang="scss" scoped>
.login-page {
  width: 100vw; /* 设置页面宽度为视口宽度 */
  height: 100vh; /* 设置页面高度为视口高度 */
  position: relative; /* 设置相对定位 */
  overflow: hidden; /* 隐藏溢出内容 */

  .login-box {
    overflow: hidden; /* 隐藏溢出内容 */

    .logo-box {
      display: flex; /* 使用弹性布局 */
      align-items: center; /* 垂直居中对齐 */
      margin-bottom: 30px; /* 底部外边距 */

      img {
        width: 68px; /* 设置图片宽度 */
        height: 68px; /* 设置图片高度 */
        margin-right: 16px; /* 右外边距 */
      }

      .sys-name {
        height: 33px; /* 设置高度 */
        font-family: PingFangSC, PingFang SC; /* 设置字体 */
        font-weight: 600; /* 设置字体粗细 */
        font-size: 24px; /* 设置字体大小 */
        color: #222222; /* 设置字体颜色 */
        line-height: 33px; /* 设置行高 */
        margin-bottom: 13px; /* 底部外边距 */
      }

      .sys-sub-name {
        height: 22px; /* 设置高度 */
        font-family: PingFangSC, PingFang SC; /* 设置字体 */
        font-weight: 400; /* 设置字体粗细 */
        font-size: 16px; /* 设置字体大小 */
        color: #222222; /* 设置字体颜色 */
        line-height: 22px; /* 设置行高 */
      }
    }

    :deep(.form-box) {
      .submit-box {
        margin-top: 90px; /* 顶部外边距 */
        width: 456px; /* 设置宽度 */
        height: 48px; /* 设置高度 */
        background: #32C5FF; /* 设置背景颜色 */
        border-radius: 8px; /* 设置圆角 */
        cursor: pointer; /* 设置鼠标指针样式 */
        display: flex; /* 使用弹性布局 */
        justify-content: center; /* 水平居中对齐 */
        align-items: center; /* 垂直居中对齐 */
        font-family: PingFangSC, PingFang SC; /* 设置字体 */
        font-weight: 600; /* 设置字体粗细 */
        font-size: 16px; /* 设置字体大小 */
        color: #FFFFFF; /* 设置字体颜色 */
        letter-spacing: 1px; /* 设置字母间距 */
      }

      .form-item {
        display: flex; /* 使用弹性布局 */
        align-items: center; /* 垂直居中对齐 */
        width: 456px; /* 设置宽度 */
        height: 48px; /* 设置高度 */
        background: #F8F8F8; /* 设置背景颜色 */
        border-radius: 8px; /* 设置圆角 */
        margin-bottom: 30px; /* 底部外边距 */
        position: relative; /* 设置相对定位 */

        .code-btn-box {
          position: absolute; /* 设置绝对定位 */
          right: 0; /* 右边距 */
          width: 151px; /* 设置宽度 */
          height: 48px; /* 设置高度 */
          background: #32C5FF; /* 设置背景颜色 */
          border-radius: 8px; /* 设置圆角 */
          top: 0; /* 顶边距 */
          display: flex; /* 使用弹性布局 */
          align-items: center; /* 垂直居中对齐 */
          justify-content: center; /* 水平居中对齐 */
          cursor: pointer; /* 设置鼠标指针样式 */

          span {
            font-family: PingFangSC, PingFang SC; /* 设置字体 */
            font-weight: 400; /* 设置字体粗细 */
            font-size: 16px; /* 设置字体大小 */
            color: #FFFFFF; /* 设置字体颜色 */
          }
        }

        .error-tip {
          position: absolute; /* 设置绝对定位 */
          width: 140px; /* 设置宽度 */
          text-align: right; /* 右对齐文本 */
          padding-right: 12px; /* 右内边距 */
          height: 20px; /* 设置高度 */
          font-family: PingFangSC, PingFang SC; /* 设置字体 */
          font-weight: 400; /* 设置字体粗细 */
          font-size: 14px; /* 设置字体大小 */
          color: #FD4C40; /* 设置字体颜色 */
          line-height: 20px; /* 设置行��� */
          right: 0; /* 右边距 */

          &.bottom {
            right: 157px; /* 右边距 */
          }
        }

        .el-input {
          width: 380px; /* 设置宽度 */
          font-family: PingFangSC, PingFang SC; /* 设置字体 */
          font-weight: 400; /* 设置字体粗细 */
          font-size: 16px; /* 设置字体大小 */
          color: #222222; /* 设置字体颜色 */
        }

        .el-input__wrapper {
          border: none; /* 无边框 */
          box-shadow: none; /* 无阴影 */
          background: transparent; /* 背景透明 */
          width: 230px; /* 设置宽度 */
          padding-left: 0; /* 左内边距 */
        }

        img {
          width: 24px; /* 设置宽度 */
          height: 24px; /* 设置高度 */
          margin: 0 18px; /* 左右外边距 */
        }
      }
    }

    width: 456px; /* 设置宽度 */
    height: 404px; /* 设置高度 */
    background: #FFFFFF; /* 设置背景颜色 */
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    border-radius: 10px; /* 设置圆角 */
    opacity: 0.9; /* 设置透明度 */
    position: absolute; /* 设置绝对定位 */
    top: 50%; /* 顶边距 */
    left: 50%; /* 左边距 */
    transform: translate(-50%, -50%); /* 平移至中心 */
    z-index: 2; /* 设置层级 */
    padding: 0 72px; /* 左右内边距 */
    padding-top: 50px; /* 顶部内边距 */
  }

  &::after {
    position: absolute; /* 设置绝对定位 */
    top: 0; /* 顶边距 */
    left: 0; /* 左边距 */
    height: 100vh; /* 设置高度 */
    bottom: 0; /* 底边距 */
    right: 0; /* 右边距 */
    background: rgba(255, 255, 255, .8); /* 设置背景颜色 */
    z-index: 1; /* 设置层级 */
    content: ''; /* 设置内容为空 */
  }

  .orange {
    background: #F0714A; /* 设置背景颜色 */
    width: 498px; /* 设置宽度 */
    height: 498px; /* 设置高度 */
    border-radius: 50%; /* 设置圆角 */
    background: #F0714A; /* 设置背景颜色 */
    opacity: 0.67; /* 设置透明度 */
    filter: blur(50px); /* 设置模糊效果 */
    left: 14.2%; /* 左边距 */
    top: 41%; /* 顶边距 */
    position: absolute; /* 设置绝对定位 */
  }

  .blue {
    width: 334px; /* 设置宽度 */
    height: 334px; /* 设置高度 */
    background: #32C5FF; /* 设置背景颜色 */
    opacity: 0.67; /* 设置透明度 */
    filter: blur(50px); /* 设置模糊效果 */
    left: 14.2%; /* 左边距 */
    top: 42%; /* 顶边距 */
    position: absolute; /* 设置绝对定位 */
    top: 16.3%; /* 顶边距 */
    left: 80.7%; /* 左边距 */

    &.small {
      width: 186px; /* 设置宽度 */
      height: 186px; /* 设置高度 */
      top: 8.2%; /* 顶边距 */
      left: 58.2%; /* 左边距 */
    }
  }
}
</style>
